<template>
  <div class="content-container">
    <h6 style="color: crimson">系统管理--><a href="http://localhost:5173/role">角色管理</a></h6>
    <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">

      <el-form-item label="所有部门" prop="departName">
        <el-select v-model="queryForm.departName" placeholder="所有部门" style="width: 240px" clearable  >
          <el-option
              v-for="item in departOptions.optionData"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所有角色状态" prop="userState">
        <el-select v-model="queryForm.roleState" placeholder="所有角色状态" style="width: 240px" clearable  >
          <el-option
              v-for="item in roleStateOptions.optionData"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="角色名" prop="posName">
        <el-input v-model="queryForm.posName" style="width: 240px" placeholder="角色名" clearable />
      </el-form-item>
      <el-form-item label="角色描述" prop="roleName">
        <el-input v-model="queryForm.roleName" style="width: 240px" placeholder="角色描述" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="querySubmit">查询</el-button>
        <el-button type="primary" @click="addUser">添加</el-button>
      </el-form-item>
    </el-form>
    <hr>
    <el-table
        :data="tableList.tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
    >
      <el-table-column prop="roleId" label="序号" width="180" />
      <el-table-column prop="posCode" label="角色编码" width="180" />
      <el-table-column prop="posName" label="角色名称" width="180" />
      <el-table-column prop="roleName" label="角色描述" width="180" />
      <el-table-column prop="roleState" label="角色状态" width="180" />
      <el-table-column prop="departName" label="角色部门" width="180" />
      <el-table-column  label="操作" >
        <template #default="scope">
          <el-button type="success" size="small" @click="updateRow(scope.$index, scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-button type="primary" @click="addUser">添加</el-button>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
          :page-sizes="[2, 5, 10, 50]"
          layout="total, sizes, prev, pager, next"
          :total="tableList.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script  setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {giftStore} from "@/stores/GiftModel.js";
import {sysUserStore} from "@/stores/sysUserModel.js";
import {roleStore} from "@/stores/RoleModel.js";


const deleteRow=(index, row) => {
  axios.delete("/role/delete/"+row.roleId).then(res=>{
    if(res.code===200){
      ElMessage.success("删除成功")
      axios.get("role/query").then(res=>{
        if(res.code===200){
          tableList.tableData=res.data
        }
      })
      axios.get("/role/getTatol").then( res=>{})
    }
  })
}
const addUser=()=>{
  router.push({path:"/role/add"})
}
const updateRow=(index, row) => {
  let sysRoleModel=roleStore()
  sysRoleModel.roleId=row.roleId
  sysRoleModel.roleName=row.roleName
  sysRoleModel.posCode=row.posCode
  sysRoleModel.posName=row.posName
  sysRoleModel.roleState=row.roleState
  sysRoleModel.departName=row.departName



  console.log(sysRoleModel)
  router.push({path:"/role/update"})
};




const queryForm = ref({
  roleId:null,
  departName:null,
  roleState:null,
  posName:null,
  roleName:null,
  userName:null,
  userAccount:null,
  userGender:null,
  pageSize:10,
  pageNum:0
});
const querySubmit = () => {
  console.log(queryForm.value);

  axios.get("/role/queryBy",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })

};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex%2 === 1) {
    return 'warning-row';
  } else{
    return 'success-row';
  }
  return '';
};

const tableList =reactive({tableData:[],total:10})
const departOptions  =  reactive({optionData:[]})
const roleStateOptions=  reactive({optionData:[]})
const posOptions=  reactive({optionData:[]})
const roleOptions=  reactive({optionData:[]})
const handleSizeChange = (val) => {

  queryForm.value.pageSize=val
  axios.get("/role/queryBy",queryForm.value).then( res=>{
    tableList.tableData=res.data
  })
};
const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  queryForm.value.pageNum=(val-1)*queryForm.value.pageSize
  axios.get("/role/queryBy",queryForm.value).then( res=>{
    tableList.tableData=res.data
    console.log(res.data)
  })
};

onMounted(()=>{
      axios.get("role/query").then(res=>{
        if(res.code===200){
          tableList.tableData=res.data
        }
      })
      axios.get("/role/paramList").then(res=>{
        if(res.code===200){
          console.log(res.data)
          departOptions.optionData=res.data.departName
          roleStateOptions.optionData=res.data.roleState
          posOptions.optionData=res.data.posName
          roleOptions.optionData=res.data.roleName
        }
      })
      axios.get("/role/getTatol").then( res=>{
        tableList.total=res.data
      })
    }
)
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.content-container {
  overflow-y: auto; /* 或者使用 overflow: scroll */
  max-height: 100vh; /* 设置最大高度为视口高度 */
  width: 100%; /* 设置宽度 */
}

</style>